<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="taglib" prefix="pln" %>


<h3><i class="gen-enclosed foundicon-tools"></i>Grilla de Pagina</h3>
<p class="note">Selecciona un tipo de grilla para tu pagina.</p>     

<span id="pageInfo" data-pageId="${page.id}" data-pageType="${page.pageType}"></span>
<div id="page_templates_dataType" class="layout-selector">
       <ul>
            <c:forEach  items="${config.dataTypeTemplates}" var="template" varStatus="status">
        		<li id="template-${template}" data-template="${template}" class="${page.template eq template ? 'active' : ''}">
            		<img src="${pageContext.request.contextPath}/images/structure/${template}.jpg">
           			<input name="layout" type="radio" value="layout-${template}" ${page.template eq template ? 'checked' : ''} />
            	</li>
			</c:forEach>               
       </ul>                          
</div> 

<h3><i class="gen-enclosed foundicon-tools"></i>Zonas de contenido</h3>
<p class="note">Cada zona tiene titulo + texto + imagen.</p> 

<c:choose>
<c:when test="${page.limit == 'unlimited'}">
<!-- En caso que se puedan agregar Zonas-->
<div class="form-actions">
	<h4 class="zones_title">En esta grilla puede agregar las zonas que necesites.</h4>
    <button type="submit" class="add_zone btn btn-primary" id="zone_add">Agregar zona</button>
</div>
</c:when>
<c:otherwise>
<!-- En caso que tenga Zonas fijas definidas -->
<div class="form-actions">
  <h4>En esta grilla tienes <span class="label label-info">${page.limit}</span> zonas disponibles.</h4>
</div>
</c:otherwise>
</c:choose>
<!-- Las pagina/tab tienen IDs que son los href de los botones/tabs, deberian ser dinamicos por Pagina y por Cantidad, ya que se usarian en otros DATATYPE -->
<ul class="nav nav-tabs" id="datatype_1" data-tabs="tabs">
	<c:forEach  items="${page.dataTypes}" var="dataType" varStatus="status">
		<li class="${status.first ? 'active' : ''}"><a href="#zone-${status.count}">Zona ${status.count}</a></li>
    </c:forEach>
</ul>

<div class="tab-content datatype">
<c:if test="${page.limit == 'unlimited'}">
 <pln:confirm target="remove_zone_modal" buttonLabel="Eliminar Zona" confirmText="¿Esta seguro que quiere eliminar la zona?" confirmButtonLabel="Eliminar zona" confirmId="removeZone" />
</c:if>
<c:forEach  items="${page.dataTypes}" var="dataType" varStatus="status">
<!-- TAB ${status.count}  -->
<div class="tab-pane ${status.first ? 'active' : ''}" id="zone-${status.count}">
<form id="imageForm_${dataType.id}">
    <input class="form-control dataTypeForm"  name="id" type="hidden" value="${dataType.id}"/>
    <input class="form-control dataTypeForm" id="" name="title" type="text" value="${dataType.title}" placeholder="Titulo${status.count}" />
    <!-- hay que agregarle el rich text editor -->
      <textarea class="form-control dataTypeForm" id="" name="paragraph" placeholder="Texto${status.count}" >${dataType.paragraph}</textarea>
  </form>
    <div style="">
        <pln:image id="${dataType.id}" websiteId="${website.id}" filename="${dataType.image.fileName}" key="dataType" type="single" classname="uploader_design"/>
    </div>



	</div>
</c:forEach>                                             
</div>

<div class='modal fade' id='modal_dataType' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-body'>
<h4>Al cambiar el template se perderan los datos cargados,desea continuar?</h4>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancelar</button>
<button type='button' class='btn btn-danger' data-dismiss='modal' id='dataTypeRemove'>Continuar</button>
</div>
</div>
</div>
</div>